<script type="text/javascript">
$(document).ready(function() {

	$('a[id^=detail]').click(function() 
	{
		var ids = $(this).attr('id').split('_');
		$('#contactValue').val(ids[1]);
		$('#dialog').dialog('open');
		$.get("/admin/contact/detail/id/"+$('#contactValue').val(),function(data)
		{
	   	  $('#dialog').html(data);
		}); 
	});

	$("#dialog").dialog({
		bgiframe: true,
		autoOpen: false,
		width: 300,
		modal: true,
		title : 'Detalle del contacto',
		buttons: {
			
			'Cerrar': function() {
				$(this).dialog('close');
			}
		},	
	
	});
	$("#list").tablesorter({widthFixed: true, widgets: ['zebra'],headers: {0: {sorter: false }, 4: {sorter: false}}});
	$("#list").tablesorterPager({container: $("#pager")});   
});	

</script>
<input type="hidden" id="contactValue" value="" >
<div id="dialog">

</div>
<!-- h2 stays for breadcrumbs -->
<h2><a href="#">Contactos</a> &raquo; <a href="#" class="active">Listar contactos</a></h2>
<div id="main">
    <table cellpadding="0" cellspacing="0" id="list" class="tablesorter">
	<thead>
		<tr>
			<th style="width : 5%;"></th>
			<th>Fecha</th>
			<th>Nombre</th>
			<th>Email</th>
			<th></th>
		</tr>	
	</thead>
	<tbody>
	<? $i = 0;?>
	<?if ( count($this->contacts) == 0 ):?>
    <tr></tr>
    <?endif;?>	
    <?foreach( $this->contacts as $u ):?>
    <?
    	if ( $i%2  == 1 )
      	{
      		$class = "odd";
      	} 
      	else
      	{
      		$class = "";
      	}	
      	$i++;
    ?>  
	<tr class="<?=$class ?>">
		<td style="padding-left : 5px;"><img style="vertical-align : middle;" src="/images/icons/page_white.png" /></td>
		<td><a href="#"><?=Common_View_Formatter_Date::getDateFromISO8601($u['date'])?></a></td> 
    	<td> <a  href="#"><?=$u->name." ".$u->last_name?></a></td>
        <td ><a  href="#"><?=$u['email']?></a></td>
        <td class="action"><a title="Detalle del contacto" id="detail_<?=$u['id'] ?>" href="#"> <img style="vertical-align : middle;" src="/images/icons/information.png" alt="remove"  border=0 /></a></td>
    </tr>       
    <?endforeach?>                  
	</tbody>	                        
    </table>
	<div id="pager" class="pager">
		<form>
			<a href="#" class="first"><img border=0 src="/img/iomanager/icons/go-first.png" /></a>
			<a href="#" class="prev"><img border=0  src="/img/iomanager/icons/go-previous.png" /></a>
			<span class="pagedisplay"></span>
			<a href="#" class="next"><img border=0 src="/img/iomanager/icons/go-next.png" /></a>
			<a href="#" class="last"><img border=0  src="/img/iomanager/icons/go-last.png" /></a>
			<select class="pagesize">
			<option selected="selected"  value="10">10</option>
			<option value="20">20</option>
			<option value="50">50</option>
			<option  value="100">100</option>
			</select>
		</form>
	</div>
   </div>
                <!-- // #main -->
                
                <div class="clear"></div>
       